<template>
  <div class="container">
    <!-- 精选题库 -->
    <el-card>
      <question-head :showMessage="false" @search="search"></question-head>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px">
          <span slot="title"> 数据一共{{ total }}条 </span>
        </el-alert>
        <el-tab-pane label="全部" name="first">
          <choice-table
            :tableData="tableData"
            @handleChange="changePage"
            :counts="total"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @handleClickSee="handleClickSee"
            @handleClickAudit="handleClickAudit"
            @handleClickEdit="handleClickEdit"
            @handleClickUnder="handleClickUnder"
            @handleClickDel="handleClickDel"
          />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <choice-table
            :tableData="tableData"
            @handleChange="changePage"
            :counts="total"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @handleClickSee="handleClickSee"
            @handleClickAudit="handleClickAudit"
            @handleClickEdit="handleClickEdit"
            @handleClickUnder="handleClickUnder"
            @handleClickDel="handleClickDel"
          />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <choice-table
            :tableData="tableData"
            @handleChange="changePage"
            :counts="total"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @handleClickSee="handleClickSee"
            @handleClickAudit="handleClickAudit"
            @handleClickEdit="handleClickEdit"
            @handleClickUnder="handleClickUnder"
            @handleClickDel="handleClickDel"
          />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <choice-table
            :tableData="tableData"
            @handleChange="changePage"
            :counts="total"
            :currentPage="currentPage"
            :pageSize="pageSize"
            @handleClickSee="handleClickSee"
            @handleClickAudit="handleClickAudit"
            @handleClickEdit="handleClickEdit"
            @handleClickUnder="handleClickUnder"
            @handleClickDel="handleClickDel"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <questions-preview :dialogVisible.sync="dialogVisible" :rowDetail="rowDetail" />
    <el-dialog title="题目审核" :visible.sync="dialogAudit" width="30%" class="Audit" :before-close="done">
      <el-radio v-model="radio" :label="1">通过</el-radio>
      <el-radio v-model="radio" :label="2">拒绝</el-radio>
      <el-input v-model="textArea" placeholder="请输入审核意见" type="textarea" style="margin-top: 20px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAudit = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QuestionHead from '@/components/QuestionHead'
import ChoiceTable from '../components/choice-table'
import { choice, detail, choiceCheck, remove, choicePublish } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview'
export default {
  components: {
    QuestionHead,
    ChoiceTable,
    QuestionsPreview
  },
  data () {
    return {
      activeName: 'first',
      tableData: [], // 传给子组件的数据
      total: 0, // 传给子组件的数据条数
      currentPage: 1, // 当前页面
      pageSize: 5, // 当前页面容量
      chkState: null, // 状态
      dialogVisible: false, // 预览模态框
      rowDetail: {}, // 子组件数据
      dialogAudit: false, // 审核模态框
      textArea: null, // 审核文本域
      radio: 2, // 审核单选按钮
      idAudit: null // 当前一项的ID值
    }
  },
  created () {
    this.getChoice()
    // console.log(this.activeName)
  },
  methods: {
    // 获取所有数据
    async getChoice (v) {
      try {
        const { data } = await choice({
          page: this.currentPage,
          pagesize: this.pageSize,
          chkState: this.chkState,
          subjectID: v || null
        })
        this.total = data.counts
        this.tableData = data.items
        // console.log(this.tableData)
      } catch (error) {
        console.log(error)
      }
    },
    // 设置分页拉取数据
    handleClick (tab) {
      if (tab.name === 'second') {
        this.chkState = 0
        this.getChoice()
      } else if (tab.name === 'third') {
        this.chkState = 1
        this.getChoice()
      } else if (tab.name === 'fourth') {
        this.chkState = 2
        this.getChoice()
      } else {
        this.chkState = null
        this.getChoice()
      }
    },
    // 分页设置
    changePage (v) {
      this.currentPage = v
      this.getChoice()
    },
    // 搜索设置
    search (item) {
      this.getChoice(item.subject)
    },
    // 点击预览
    async handleClickSee (v) {
      try {
        this.dialogVisible = true
        const { data } = await detail({
          id: v
        })
        this.rowDetail = data
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 点击审核
    async handleClickAudit (v) {
      this.dialogAudit = true
      this.idAudit = v
    },
    // 点击修改
    handleClickEdit (v) {
      console.log(v)
      this.$router.push({ name: 'questions-new', query: { id: v.id } })
    },
    // 点击上下架
    async handleClickUnder (v) {
      console.log(v)
      try {
        // 待上架
        if (v.publishState === 0) {
          await this.$confirm('您确定上架这道题目吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            await choicePublish({
              id: v.id,
              publishState: 1
            })
            await this.$message({
              type: 'success',
              message: '上架成功!'
            })
            await this.getChoice()
          })
        } else {
          await this.$confirm('您确定下架这道题目吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            await choicePublish({
              id: v.id,
              publishState: 0
            })
            await this.$message({
              type: 'success',
              message: '下架成功!'
            })
            await this.getChoice()
          })
        }
      } catch (error) {}
    },
    // 点击删除
    async handleClickDel (v) {
      try {
        await this.$confirm('此操作会将永久删除该文件,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await remove({ id: v })
          await this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await this.getChoice()
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 关闭弹出层
    done () {
      this.dialogAudit = false
    },
    // 提交审核
    async submit () {
      try {
        await choiceCheck({ id: this.idAudit, chkRemarks: this.textArea, chkState: this.radio })
        await this.$message.success('审核通过！')
        this.getChoice()
      } catch (error) {
        console.log(error)
      }
      this.dialogAudit = false
    }
  }
}
</script>

<style scoped lang='less'>
// 祛除背景颜色
/deep/.el-alert--error.is-light {
  background-color: #ffffff;
  color: pink;
}
.container {
  padding: 15px 10px;
}
.Audit {
  padding: 10px 40px;
}
</style>
